<script setup>
import { ref, onMounted } from 'vue'
import { useCategoryListService } from '@/api/category.js'

const emits = defineEmits(['update:model-value'])
defineProps({
  modelValue: {
    required: true,
    type: [String, Number]
  },
  width: {
    type: String,
    default: '30%'
  }
})
const cateList = ref([])
onMounted(async () => {
  let res = await useCategoryListService()
  cateList.value = res.data
})
</script>

<template>
  <el-select
    :style="{ width }"
    :modelValue="modelValue"
    @update:model-value="emits('update:model-value', $event)"
    clearable
  >
    <el-option
      v-for="cate in cateList"
      :label="cate.categoryName"
      :value="cate.id"
      :key="cate.id"
    />
  </el-select>
</template>

<style scoped></style>
